<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<!-- 文本格式化属性针对文本相关操作（四种方式 10个属性）
		    1.控制字体：font-family、font-size、font-weight
			2.控制文本布局：text-align、line-height、letter-spacing、word-spacing
			3.文本修饰效果：text-decoration、text-shadow
			4.处理文本效果：white-space
		 -->
		 <style>
			 /** 错 */ java
			 /* css3语法:选择器{
				            属性: 属性值;
							属性: 属性值;
							.....
			                }
							叫法：一个样式
			*/			
			 / 错 / java
			 <!-- 错 -->
			 body div#d1{ /*通过加权方式，锁定元素  权值：102*/
				 color: #42ee28;
				 /*知识点1 ：文本格式化属性控制字体
				 font-family:字体家族，指定字体形式
				 */
				 font-family: 华文彩云,sans-serif;
				 /*设置多个字体：浏览器会按照顺序寻找可用字体
				 用户体验，用户系统有什么字体，优先指定字体
				 通常与通配选择器使用  *{}
				 */
				 /* 知识点2：文本格式化属性控制字体
				 font-size:字体大小属性，与单位共存
				 单位 px 像素    使用特点：绝对值，PC端
				    em 相对单位，理解：倍数
					             使用特点：相对与父元素按照倍数方式，移动端
				 */
				/* 知识点3：文本格式化属性控制字体
				font-weight:字体粗细属性，不存在单位
				           属性值：数值【100 200 300 ... 900】
						   常用数值：400
						   单词【400==normal，bold，light】
				使用方法：通配选择器搭配使用：指定全局正常字体粗细		   
				*/
			    font-weight: 900;
			    font-size: 2em;
			    /*补充：1.英文大写；2.首字母大写；3.段落开始间距200px*/
				 text-transform: uppercase;
				 text-transform: capitalize;
				 text-indent: 200px;
			 }
			 div#d1{ /*通过加权方式，锁定元素  权值：101*/
				 color: #c735cc;
				 /*知识点4 ：文本格式化属 性控制文本格式
				 text-align:文本对齐属性
				 left|right|center|justify:两端对齐,用于弹性布局
				 */
				 text-align: justify;
				 /*知识点5 ：文本格式化属性控制文本格式
				  行高属性line-height:文本垂直效果
				  使用方法：
				 */
				border: 1px solid red;
				height: 100px;
				line-height: 100px;
				 /*补充：文本对齐和行高属于对齐|间隙：字符和单词之间距离*/
				 /*知识点6 ：letter-spacing:设置字符之间的间隙
				  知识点7：word-spacing：设置单词之间间隙
				*/
			   letter-spacing:10px;
			   word-spacing: 10px;
			 } 
			 #d1{ /*权值：100*/
				 color: #ee3224;
			 }
			 
			 a.c1{/*权值：11*/
			     /*知识点8：text-decoration 修饰超链接样式
				 使用方法：与通配符一起使用，设置全局页面超链接样式
				 属性值：none|underline|line-throngh
				 */
				 text-decoration: line-through;
				 /*知识点9：text-shadow 修饰文本阴影
				    属性值：X轴 Y轴 blur模糊距离 color
				 */
				text-shadow: 5px 5px 5px #440000;
			 }
			 p{
				 border: 1px solid red;
				 /*知识点10：文本换行效果
				  white-space:文本换行属性
				  属性值：nowrap 不换行，只显示一行，超出部分默认|pre 保留空格和回车|normal默认，空格合并，换行隐藏
				 */
				white-space: normal;
			 }
		 </style>
	</head>
	<body>
	    <!--需求:创建div同时指定别名,添加假文【tap】 
		        id选择器,通过加权找到div,添加颜色
		-->
		<div id="d1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, ipsam. Vitae nemo illo totam doloribus magnam porro similique dolores deserunt assumenda, ratione doloremque autem quisquam aliquid nam? Maiores, provident velit.</div>
		<hr>
		<h4>文本修饰效果</h4>
		<!-- 文本修饰相关属性
		 知识点7：text-decoration属性：设置超链接效果
		 -->
		<a class="c1 c2" href="http://tsgzy.edu.cn">实现跳转【方式：6种】</a>
		<div style="height: 800px;"></div>
		<marquee>
			<h4>处理文本效果</h4>
		</marquee>
		<p>Lorem   
		ipsum dolor sit amet, 
		 consectetur adipisicing elit. 
		  Dolor illo iusto iure neque quo, 
		  quae laboriosam ut suscipit quis exercitationem 
		  consectetur minima ipsum tempore sit molestias 
		  beatae voluptatem excepturi possimus.</p>
	</body>
</html>